<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>流程列表</title>
    <script src="../../assets/js/config.js"></script>
</head>
<body>
<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">状态:</label>
                        <div class="layui-input-inline">
                            <select name="status">
                                <option value="">全部</option>
                                <option value="1">已通过</option>
                                <option value="2">处理中</option>
                                <option value="0">未通过</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">申请人:</label>
                        <div class="layui-input-inline">
                            <input name="userName" class="layui-input" placeholder="请输入姓名"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">标题:</label>
                        <div class="layui-input-inline">
                            <input name="title" class="layui-input" placeholder="请输入标题"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">发起时间:</label>
                        <div class="layui-input-inline">
                            <input name="date" class="layui-input" placeholder="输入访问日期" id="test2"/>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button id="search" class="layui-btn icon-btn" lay-filter="userTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="userTable" lay-filter="userTable"></table>
        </div>
    </div>
</div>
<script type="text/html" id="proofDialog">
    <form id="importAccountForm" lay-filter="importAccountForm" class="layui-form model-form"
          style="padding-right: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">文件附件</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload">选择附件</button>
                <span id="fileName"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label layui-form-required">文字描述</label>
            <div class="layui-input-block">
                <textarea name="proof" placeholder="请输入" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <a class="layui-btn" id="action" lay-filter="action" lay-submit>保存</a>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</a>
</script>
<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'upload', 'laydate', 'util',], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var upload = layui.upload;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#test2', //指定元素
            type: 'date',
            range: '至',
            trigger: 'click'
        });
        /* 渲染表格 */
        var insTb = table.render({
            elem: '#userTable',
            url: '/office/flowStepInstance/queryInstanceListAuth',
            page: true,
            request: {
                pageName: 'page',
                limitName: 'rows',
            },
            method: 'post',
            cellMinWidth: 100,
            height: $(window).height() - 100,
            cols: [[
                {type: 'numbers'},
                {field: 'userName', title: '申请人', sort: false},
                {field: 'title', title: '流程标题', sort: false},
                {
                    field: 'crtDate', title: '发起时间', sort: false, templet: function (value) {
                        return dateFormatter(value.crtDate)
                    }
                },
                {
                    field: 'status', title: '进度', sort: false, templet: function (row) {
                        switch (parseInt(row.status)) {
                            case 0:
                                return '已驳回';
                            case 1:
                                return '已同意';
                            case 2:
                                return '待结束';
                            case -1:
                                return '待处理'
                        }
                        return '待结束';
                    }
                },
                {field: 'status', title: '操作', toolbar: '#tableBar'},
            ]],
            parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.obj.total,
                    "data": res.obj.rows
                }
            }
        });
        table.on('tool(userTable)', function (obj) {
            let row = obj.data;
            if (obj.event === 'detail') { // 修改
                showProcess(row.id, row.content)
            } else if (obj.event === 'delete') {
                deleteRecord(row.id, row.status)
            } else if (obj.event === 'proof') {
                openProof(row)
            }
        });
        /* 表格搜索 */
        form.on('submit(userTbSearch)', function (data) {
            var param = {};
            var date = data.field.date;
            var array = date.split("至");
            param.startDate = array[0];
            param.endDate = array[1];
            param.status = data.field.status;
            param.title = data.field.title;
            param.userName=data.field.userName;
            insTb.reload({where: param, page: {curr: 1}});
            return false;
        });

        /**
         * 删除流程
         */
        function deleteRecord(instanceId, status) {
            status = parseInt(status)
            if ((status === 0 || status === 1)&&getAccount()!='852586') {
                showAlert('流程已结束，无法删除！！！');
                return false;
            }
            layer.confirm("确认删除", function (index) {
                let url = '/office/flowStepInstance/deleteFlowStepInstance';
                $.post(url, {id: instanceId}, function (res) {
                    if (res.code == 200) {
                        layer.close(index);
                        showMsg(res.msg);
                        $("#search").click();
                    } else {
                        showAlert(res.msg, 2);
                    }
                })
            })
        }

        /**
         * 查看流程详情
         * @param param
         * @param content
         */
        function showProcess(_instanceId, content) {
            instanceId = _instanceId;
            url = "/office/flowStepApprove/approve";
            openDialog("../" + content + ".html?instanceId=" + instanceId, '查看流程详情', true);
        }

        function openProof(row) {
            layer.open({
                type: 1,
                area: ['60%', '80%'],
                content: $('#proofDialog').html(),
                success: function (layero, dIndex) {
                    let params = {instanceId: row.id};
                    form.on('submit(action)', function (data) {
                        params.proof = data.field.proof;
                        if ((!params.proof) && (!params.proofAnnex)) {
                            showAlert('附件和文字描述不能全部为空！！');
                            return false;
                        }
                        $.post('/office/flowStepApprove/updateFlowProof', params, function (res) {
                            if (res.code == 200) {
                                closeDialog();
                                insTb.reload({page: {curr: 1}});
                                showMsg(res.msg);
                            }
                        })

                    })
                    upload.render({
                        elem: '#upload'
                        , accept: 'file'
                        , url: '/office/file/uploadFile' //上传文件
                        , done: function (res) {
                            if (res.code == 200) {
                                params.proofAnnex = res.obj.storeName;
                                $("#fileName").text(res.obj.fileName)
                            } else {
                                showAlert('上传附件异常！！！');
                            }
                            return false;
                        }
                    });
                }
            });
        }
    });
</script>
</body>
</html>
